<!--
 * @Author: Li Zengkun
 * @Date: 2022-07-25 17:22:23
 * @LastEditors: Li Zengkun
 * @LastEditTime: 2022-07-26 09:42:55
 * @Description: 编辑地址
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/style.css">
    <script src="../node_modules/jquery/dist/jquery.min.js"></script>
    <script src="../node_modules/distpicker/dist/distpicker.min.js"></script>
    <title>编辑地址</title>
</head>

<body>
    <header>
        <a href="#">
            <img src="../img/右箭头.png" alt="">
        </a>
        编辑地址
    </header>

    <form action="#" class="content">
        <label class="item" for="consignee">
            <span> 收货人：</span>
             <input type="text" id="consignee" name="consignee" >
         </label>
        <label for="phonenum">
            <span> 手机号码：</span>
             <input type="number" id="phonenum" name="phonenum" >
         </label>
        <label for="address">
            <span> 所在地区：</span>
             <div id="address-checkgroup" data-toggle="distpicker" data-autoselect="0">
                <select></select>
                <select></select>
                <select></select>
              </div>
         </label>
        <label for="address-details">
            <span> 详细地址：</span>
             <textarea name="address-details" id="address-details"  rows="3"></textarea> 
         </label>
        <label for="post-code">
            <span> 邮政编码：</span>
             <input type="number" id="post-code" name="post-code" >
         </label>
        <label for="default-address">
            <span> 默认地址：</span>
             <input type="checkbox" id="default-address" name="default-address" >
         </label>

        <input class="save pointer" type="submit" value="保存修改">

    </form>
</body>


<style>
    form {
        width: 100%;
    }
    
    form>label {
        width: 100%;
        display: block;
        padding: 3.47vw 2.93vw 4.13vw 2.93vw;
        box-sizing: border-box;
        border-bottom: 0.13vw solid #dddddd;
        display: flex;
        justify-content: space-between;
    }
    
    form>label>span {
        width: 26.67vw;
        font-size: 3.73vw;
        line-height: 3.73vw;
        color: #666666;
    }
    
    form>label>input,
    form>label>textarea {
        font-size: 3.73vw;
        line-height: 3.73vw;
        color: #333333;
        width: calc(100% - 26.67vw);
        border: none;
    }
    
    #default-address {
        width: 4vw;
        height: 4vw;
        border: solid 0.27vw #bfbfbf;
    }
    
    #address-checkgroup {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    
    #address-checkgroup>select {
        width: 30.8vw;
        height: 6.13vw;
        border: solid 0.13vw #dcdcdc;
    }
    
    #address-checkgroup>select:nth-child(3) {
        margin-top: 3vw;
    }
    
    .save {
        position: fixed;
        z-index: 999;
        bottom: 2.8vw;
        width: 94.4vw;
        height: 9.73vw;
        background-color: #c55a5c;
        border-radius: 0.53vw;
        border: none;
        left: 2.8vw;
        font-size: 3.73vw;
        line-height: 6.4vw;
        color: #ffffff;
    }
</style>

</html>